<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <script src="../module/ydui/ydui.flexible.min.js"></script>
    <link href="../module/ydui/ydui.min.css" rel="stylesheet">
    <link href="../module/swiper/swiper-3.4.1.min.css" rel="stylesheet">
    <style>
        .slider-bgImg-Cover {
            width: 100%;
            padding-top: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
        }
    </style>
</head>
<body>
<div class="g-view">
    <!-- 使用：样式模块以按钮为例 -->
    <div class="m-button">
        <a href="javascript:;" class="btn-block btn-primary" id="J_Btn">Button</a>
    </div>

    <!--轮播图-->
    <div class="swiper-container" id="swiper_container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slider-bgImg-Cover"
                 style="background-image: url(http://static.ydcss.com/uploads/ydui/1.jpg)">
                <!--<img src="http://static.ydcss.com/uploads/ydui/1.jpg"/>-->
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

</div>
</body>
<script src="../module/jquery/2.1.4/jquery.min.js"></script>
<script src="../module/swiper/swiper-3.4.1.jquery.min.js"></script>
<script src="../module/ydui/ydui.min.js"></script>
<script>
    !function ($) {

        var swiper = void 0;

        $('#J_Btn').on('click', function () {

            var swiperHtmlAry = [];
            swiperHtmlAry.push('<div class="swiper-slide slider-bgImg-Cover" style="background-image: url(http://static.ydcss.com/uploads/ydui/1.jpg)"></div>');
            swiperHtmlAry.push('<div class="swiper-slide slider-bgImg-Cover" style="background-image: url(http://static.ydcss.com/uploads/ydui/2.jpg)"></div>');
            swiperHtmlAry.push('<div class="swiper-slide slider-bgImg-Cover" style="background-image: url(http://static.ydcss.com/uploads/ydui/3.jpg)"></div>');

            $('#swiper_container .swiper-wrapper').html(swiperHtmlAry.join(''));

            swiper ? swiper.destroy() : null;

            swiper = new Swiper('#swiper_container', {
                direction: 'horizontal',
                loop: true,
                autoplay: 2000,
                onlyExternal: false,
                autoplayDisableOnInteraction: false,
                paginationClickable: true,
                pagination: '.swiper-pagination',
                paginationType: 'bullets'
            });
        });
    }(jQuery);
</script>
</html>